<template>
	<view
		v-if="orderAvatarList && orderAvatarList.length"
		class="inline-flex flex-col px-6 py-4 radius-14 text-white fs-12 font-normal whitespace-nowrap overflow-hidden"
		style="background: rgba(51, 51, 51, 0.60);"
	>
		<uni-transition :duration="500" :show="showContent" @change="onChange">
			<view class="inline-flex item-center">
				<image class="cu-avatar round" style="width:20px;height:20px;margin-right:4px;" :src="orderAvatarList[current]"></image>
				<text class="text">{{text}}</text>
			</view>
		</uni-transition>
	</view>
</template>

<script setup name="DanMu">
	import { getOrderAvatar } from '@/api/order.js'
	import { onMounted, onUnmounted, ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const props = defineProps({
		avatarUrl: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: ''
		},
		urlParams: {
			type: String,
			default: ''
		}
	})
	
	const orderAvatarList = ref([])
	const current = ref(0)
	const showContent = ref(true)
	let timer
	const transRef = ref(null)
	const startTimer = () => {
		stopTimer()
		timer = setInterval(() => {
			showContent.value = false
		}, 3500)
	}
	const stopTimer = () => {
		if (timer) {
			clearInterval(timer)
		}
		timer = null
	}
	const onChange = () => {
		current.value++
		if (current.value >= orderAvatarList.value.length) {
			current.value = 0
		}
		showContent.value = true
	}
	const getData = () => {
		let params = {}
		if(props.urlParams){
			params = {linkParamsUrl:props.urlParams}
		}
		getOrderAvatar(params).then(res => {
			orderAvatarList.value = res || []
			startTimer()
		})
	}
	onShow(()=>{
		if (userStore.isLogin) {
			getData()
		}
	})
	onMounted(() => {
		getData()
	})
	
	onUnmounted(() => {
		stopTimer()
	})
</script>
